<script setup lang="ts">
import CopyOutlined from "@ant-design/icons-vue/CopyOutlined";
import {message} from "ant-design-vue";
import {WxtBiddingConstraintType, WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
  promotionScene: {
    type: String as PropType<WxtBiddingConstraintType>,
    default: WxtBiddingConstraintType.促进全店成交,
  },
  data: {
    type: Array as PropType<any[]>,
    default: () => []
  }
});
const emit = defineEmits([
  "update:value",
  "next",
  "prev",
]);

const getPlansData = () => {
  return props.data.filter((item: any) => item.key === 'choicePlan')[0].value;
}
const getProductsData = () => {
  return props.data.filter((item: any) => item.key === 'choiceProduct')[0].value;
}
const dataSource = ref<any[]>([]);
const calcDataSource = () => {
  // 将计划和宝贝数据合并 product 放到plan products字段下
  const plansData = getPlansData();
  const productsData = getProductsData();
  const data: any[] = [];
  plansData.forEach((plan: any) => {
    plan.products = productsData;
    data.push(plan);
  });
  dataSource.value = data;
  emit('update:value', data);
}
calcDataSource();
watch(() => props.data, () => {
  calcDataSource();
}, {
  deep: true,
});
const columns: any[] = [
  {
    title: '计划名称',
    dataIndex: 'campaignName',
    width: 240,
    dataType: 'custom',
    slot: 'campaignName',
  },
  {
    title: '已有商品',
    dataIndex: 'adgroupCount',
    dataType: 'customRender',
    width: 100,
    render: (text: number, record: any) => {
      return record.adgroupList.length;
    },
  },
  {
    title: '商品列表',
    dataIndex: 'products',
    dataType: 'custom',
    slot: 'products',
    // width: 80,
    // render: (text: number, record: any) => {
    //   return record.adgroupList.length;
    // },
  },
  {
    title: '操作计划',
    dataIndex: 'handlePlan',
    dataType: 'custom',
    slot: 'handlePlan',
    width: 100,
    // width: 80,
    // render: (text: number, record: any) => {
    //   return record.adgroupList.length;
    // },
  },
]
const copy = (text: string) => {
  navigator.clipboard.writeText(text).then(() => {
    message.success('复制成功')
  }).catch(() => {
    message.error('复制失败')
  });
}
watch(() => dataSource.value, () => {
  emit('update:value', dataSource.value);
}, {
  deep: true,
});
</script>

<template>
  <base-table title="确认宝贝" :data-source="dataSource" :columns="columns">
    <template #header>
      <div></div>
    </template>
    <template #campaignName="row">
      <a-row type="flex" class="adgroupName" :gutter="5">
        <!--            <a-col>-->
        <!--              <a-popover placement="right">-->
        <!--                <template #content>-->
        <!--                  <img :src="row.imgUrl"-->
        <!--                       style="width: 200px;height: 200px;"-->
        <!--                  />-->
        <!--                </template>-->
        <!--                <img :src="row.imgUrl"-->
        <!--                     style="width: 60px;height: 60px;border-radius: 5px;"-->
        <!--                />-->
        <!--              </a-popover>-->
        <!--            </a-col>-->
        <a-col flex="1" class="title">
          <a-tooltip :title="row.title">
              <span style="
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;"
              >{{ row.campaignName }}</span>
          </a-tooltip>
          <div>
            <a-space>
              <span style="color: #666;">ID: {{ row.campaignId }}</span>
              <CopyOutlined style="color: #1677ff;cursor: pointer;font-size: 12px;" @click="copy(row.campaignId)"/>
            </a-space>
          </div>
        </a-col>
      </a-row>
    </template>
    <template #products="record">
      <base-table :data-source="record.products" :columns="[
        {
          title: '宝贝标题',
          dataIndex: 'title',
          dataType: 'custom',
          width: 240,
          slot: 'product',
          fixed: 'left',
        },
          ...([WxtBizCode.关键字推广, WxtBizCode.精准人群推广].includes(props.bizCode) ? [{
    title: '价格',
    dataIndex: 'price',
    width: 80,
    dataType: 'customRender',
    render: (text: number) => {
      return `￥${(text / 100).toFixed(2)}`;
    },
  }] : []),
              {
          title: '库存',
          dataIndex: 'quantity',
          width: 80,
        },
        {
          title: '销量',
          dataIndex: 'bidCount',
          width: 80,
        },
        {
          title: '发布时间',
          dataIndex: 'starts',
          align: 'right',
          width: 200,
        },
        {
          title: '首次发布时间',
          dataIndex: 'firstStartsTime',
          align: 'right',
          width: 200,
        },
        {
          title: '操作',
          dataIndex: 'handle',
          dataType: 'custom',
          slot: 'handle',
          width: 80,
        },
      ]"
                  :scroll="{
        y: 200,
                  }"
      >
        <template #header>
          <div></div>
        </template>
        <template #product="row">
          <a-row type="flex" class="adgroupName" :gutter="5">
            <a-col>
              <a-popover placement="right">
                <template #content>
                  <img :src="row.imgUrl"
                       style="width: 200px;height: 200px;"
                  />
                </template>
                <img :src="row.imgUrl"
                     style="width: 60px;height: 60px;border-radius: 5px;"
                />
              </a-popover>
            </a-col>
            <a-col flex="1" class="title">
              <a-tooltip :title="row.title">
              <span style="
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;"
              >{{ row.title }}</span>
              </a-tooltip>
              <div>
                <a-space>
                  <span style="color: #666;">ID: {{ row.itemId }}</span>
                  <CopyOutlined style="color: #1677ff;cursor: pointer;font-size: 12px;" @click="copy(row.itemId)"/>
                </a-space>
              </div>
            </a-col>
          </a-row>
        </template>
        <template #handle="row">
          <a-space>
            <a-button type="primary" danger size="small" @click="()=>{
              // 从dataSource删除当前宝贝
              record.products = record.products.filter((item)=>item.itemId !== row.itemId);
              // 替换当前计划
              dataSource = dataSource.map((item)=>{
                if(item.campaignId === record.campaignId){
                  item = record;
                }
                return item;
              });
            }"
            >删除宝贝
            </a-button>
          </a-space>
        </template>
      </base-table>
    </template>
    <template #handlePlan="record">
      <a-space>
        <a-button danger type="primary" size="small" @click="()=>{
          // 从dataSource删除当前计划
          dataSource = dataSource.filter((item)=>item.campaignId !== record.campaignId);
        }"
        >删除计划
        </a-button>
      </a-space>
    </template>
  </base-table>
  <a-divider style="margin-top: 10px;"/>
  <a-row type="flex">
    <a-col flex="1">
    </a-col>
    <a-col>
      <a-space>
        <a-button @click="emit('prev',[])">上一步</a-button>
        <a-button type="primary" @click="()=> emit('next',[])">下一步</a-button>
      </a-space>
    </a-col>
    <a-col flex="1">
    </a-col>
  </a-row>
</template>

<style scoped>

</style>
